<template>
  <Card title="水质断面">
    <template #content>
      <div class="content">
        <div
          :class="['content-bg', { scale_1: index === 1 }]"
          v-for="(item, index) in list"
          :key="item.name"
          :style="{'background-image': `url(${item.img})` }"
        >
          <div class="content-item">
            <p class="content-item_name">{{ item.name }} {{ item.level }}级</p>
            <img src="../../assets/images/bigscreen/jiantouxia.png" alt="" />
          </div>
        </div>
      </div>
    </template>
  </Card>
</template>
<script setup>
defineOptions({
  name: "CenterCard",
  inheritAttrs: false,
});

import { ref } from "vue";

import img1 from "../../assets/images/bigscreen/bottommap1.png";
import img2 from "../../assets/images/bigscreen/bottommap2.png";
import img3 from "../../assets/images/bigscreen/bottommap3.png";
const list = ref([
  {
    name: "将军岩",
    level: "Ⅰ",
    img: img1
  },
  {
    name: "横山大桥",
    level: "Ⅱ",
    img: img2
  },
  {
    name: "南门大桥",
    level: "Ⅰ",
    img: img3
  },
]);
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  &-bg {
    // scale: 0.78;
    height: 100%;
    background: #cfdbea;
    border-radius: 6px;
    border: 4px solid #eeeeee;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    text-align: center;
    .content-item {
      &_name {
        height: 33px;
        line-height: 33px;
        padding: 0 15px;
        background: url("../../assets/images/bigscreen/biaodian.png") no-repeat;
        background-size: 100% 100%;
        font-size: 16px;
        color: #ffffff;
        margin-bottom: 10px;
      }
    }
  }
  .scale_1 {
    scale: 1;
  }
}
</style>
